import { useEffect, useState } from "react";
import './index.less';
import FirstView from "./components/FirstView";
import SecondView from "./components/SecondView";
import ThirdView from "./components/ThirdView";
import FourthView from "./components/FourthView";

const tabs = [
  { name: '多列布局', value: 1 },
  { name: 'grid布局', value: 2 },
  { name: 'flex布局', value: 3 },
  { name: '使用masonry-css', value: 4 }
];

function WaterfallFlow() {
  const [activeTab, setActiveTab] = useState(1)
  const [imgList, setImgList] = useState([]);

  const handTab = (tab) => {
    tabs.forEach(item => {
      item.active = item.value === tab.value
    })
    setActiveTab(tab.value)
  }

  const createImgs = () => {
    const arr = []
    for (let i = 1; i <= 16; i++) {
      arr.push(`src/assets/images/${i}.jpeg`)
    }
    setImgList(arr)
  }

  useEffect(() => {
    createImgs()
  }, [])

  return (
    <div>
      <div className="tab-box">
        { tabs.map((tab) => 
          <span
            key={tab.value}
            className={tab.active ? 'active' : ''}
            onClick={() => handTab(tab)}
          >
            { tab.name }
          </span>
        ) }
      </div>
      { activeTab === 1 && <FirstView listData={imgList} /> }
      { activeTab === 2 && <SecondView listData={imgList} /> }
      { activeTab === 3 && <ThirdView listData={imgList} /> }
      { activeTab === 4 && <FourthView listData={imgList} /> }
    </div>
  )
}

export default WaterfallFlow